<template>
  <el-dialog :title="dialogTitle" :visible="visible" custom-class="batch-dialog" @close="handleClose">
    <el-form>
      <el-form-item :label="$t('domainlist.enterInput')">
        <el-input v-model="localBatchInput" type="textarea" rows="20" :placeholder="currentPlaceholder" clearable />
      </el-form-item>
    </el-form>

    <template #footer>
      <template v-if="batchAction === 'push'&&$store.getters.name==='bepicRF'">
        <el-checkbox v-model="pushCheckbox">仅改模板-不推送</el-checkbox>
      </template>
      <el-button @click="handleClose">{{ $t('domainlist.cancel') }}</el-button>
      <el-button :type="batchAction === 'remove' ? 'danger' : 'primary'" :loading="batchLoading" @click="confirm">
        {{ confirmButtonText }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'BatchDialog',
  props: {
    visible: Boolean,
    batchAction: String, // 'remove' | 'push' | 'defaultconfig'
    batchInput: String,
    batchLoading: Boolean,
    removePlaceholder: String,
    pushPlaceholder: String
  },
  data() {
    return {
      localBatchInput: this.batchInput,
      pushCheckbox: false,

    }
  },
  computed: {
    dialogTitle() {
      switch (this.batchAction) {
        case 'remove':
          return this.$t('domainlist.batchRemove')
        case 'push':
          return this.$t('domainlist.batchPush')
        case 'defaultconfig':
          return this.$t('domainlist.addDefaultConfig')
        default:
          return this.$t('domainlist.batchAction') || '批量操作'
      }
    },
    confirmButtonText() {
      switch (this.batchAction) {
        case 'remove':
          return this.$t('domainlist.confirmRemove')
        case 'push':
          return this.$t('domainlist.confirmPush')
        case 'defaultconfig':
          return this.$t('domainlist.confirm')
        default:
          return this.$t('domainlist.confirm')
      }
    },
    currentPlaceholder() {
      switch (this.batchAction) {
        case 'remove':
          return this.removePlaceholder
        case 'push':
          return this.pushPlaceholder
        case 'defaultconfig':
          return ''
        default:
          return ''
      }
    }
  },
  watch: {
    batchInput(val) {
      this.localBatchInput = val
    },
    visible(val) {
      if (val) {
        this.localBatchInput = this.batchInput
      }
    }
  },
  methods: {
    confirm() {
      console.log(this.localBatchInput, this.pushCheckbox)
      this.$emit('confirm', {
        input: this.localBatchInput,
        onlyChangeTemplate: this.pushCheckbox
      })
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
      this.pushCheckbox = false 
    }
  }
}
</script>

<style>
.batch-dialog {
  width: 90%;
  max-width: 600px;
}

.el-checkbox:last-of-type {
  float: left;
}

@media (orientation: portrait) {
  .batch-dialog {
    margin: 0 auto !important;
  }
}
</style>
